<template>
  <div class="accordion-gallery">
    <div
      v-for="(item, index) in items"
      :key="index"
      class="accordion-item"
      :class="{ active: activeIndex === index }"
      @click="toggleAccordion(index)"
    >
      <div class="accordion-header">
        {{ item.title }}
      </div>
      <div v-if="activeIndex === index" class="accordion-content">
        <img v-for="(image, imgIndex) in item.images" :key="imgIndex" :src="image" alt="Gallery Image" />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';

const items = ref([
  {
    title: 'Album 1',
    images: [
      'https://cdn.example.com/image1.jpg',
      'https://cdn.example.com/image2.jpg',
      'https://cdn.example.com/image3.jpg',
    ],
  },
  {
    title: 'Album 2',
    images: [
      'https://cdn.example.com/image4.jpg',
      'https://cdn.example.com/image5.jpg',
      'https://cdn.example.com/image6.jpg',
    ],
  },
  // Add more albums here
]);

const activeIndex = ref(-1);

const toggleAccordion = (index: number) => {
  if (activeIndex.value === index) {
    activeIndex.value = -1;
  } else {
    activeIndex.value = index;
  }
};
/***
 * 增 insert
 * 删 delete
 * 改 update
 * 查 select select hwy from table_name
 */
</script>

<style scoped>
/* 样式可以根据需求进行调整 */
.accordion-gallery {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
}

.accordion-item {
  border: 1px solid #ccc;
  margin-bottom: 10px;
  cursor: pointer;
}

.accordion-header {
  padding: 10px;
  background-color: #f2f2f2;
}

.accordion-content {
  padding: 10px;
  display: none;
}

.active .accordion-content {
  display: block;
}
</style>
